<template>
  <van-row class="searchGoodsListRow">
  <van-col span="8">
    <p>综合</p>
  </van-col>
  <van-col span="8">
    <p>价格</p>
  </van-col>
  <van-col span="8">
    <p>分类</p>
  </van-col>
</van-row>

<!-- 轮播图下的数据 -->
<div class="showGoodsListMain">  
      <van-row class="showGoodsListRow">
        <van-col span="12" v-for="goods in showGoodsList" :key="goods.id">
          <div class="showGoodsListColMain">
            <img style="width: 4.53rem;background-color: #f4f4f4; border-radius: .27rem; " :src="goods.listPicUrl">
            <p>{{goods.name}}</p>
            <span class="newPrice">￥{{goods.retailPrice}}</span>
            <span class="oldPrice" v-if="goods.counterPrice">￥{{goods.counterPrice}}</span>
          </div>
        </van-col>
      </van-row>
    </div>
</template>

<script setup lang="ts">
import searchApi from '@/api/search'
import {type ItemModel} from '@/api/homeList'
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
defineEmits<{
  (e:'getKeyword',val:string):void,
  (e:'getKwdArr',val:string[]):void,
  (e:'getRealKeyword',val:string):void
}>()
defineProps<{
  realTimeKeywordList:[],
  keyword:string|number
}>()
const route = useRoute()
// console.log(route);

// 数据展示
const showGoodsList = ref<ItemModel[]>([])


// 数据展示回调
const getSearchGoodsListData = async () => {
  try {
    let res = await searchApi.getSearchGoodsList(route.query.keyword as string)
    // console.log('res',res);
    // 更新数据
    showGoodsList.value = res.data.directlyList
    // console.log(showGoodsList.value);
    
  } catch (error) {
    console.log(error);
  }
}

onMounted(()=>{
  getSearchGoodsListData()
})
</script>

<style scoped>
.searchGoodsListRow{
  text-align: center;
  font-size: .37rem;
  background-color: #fafafa;
  height: 1.07rem;
  line-height: 1.07rem;
  border-bottom: .03rem solid #d9d9d9;
}

.showGoodsListMain p{
  text-align: center;
  line-height: .61rem;
}
.showGoodsListMain > p:nth-child(1){
  font-size: .43rem;
  padding-top: .53rem;
}
.showGoodsListMain > p:nth-child(2){
  font-size: .32rem;
  color: #999;
}

.showGoodsListMain .showGoodsListRow{
  margin-top: .21rem;
  margin-left: .27rem;
  
}
.showGoodsListMain .showGoodsListRow .showGoodsListColMain{
  width: 4.6rem;
  height: 7.38rem;
}
.showGoodsListMain .showGoodsListRow .showGoodsListColMain p{
  font-size: .37rem;
  text-align: left;
}
.showGoodsListMain .showGoodsListRow .showGoodsListColMain .newPrice{
  color: red;
  font-size: .43rem;
  font-weight: bold;
}
.showGoodsListMain .showGoodsListRow .showGoodsListColMain .oldPrice{
  color: #999;
  text-decoration:line-through;
  font-size: .32rem;
}
</style>